<template>
  <view class="container">
    <!-- 跳过按钮 -->
    <view class="skip-button" @click="skipGuide">跳过</view>

    <!-- 轮播图 -->
    <swiper class="swiper" autoplay="true" interval="3000" circular="true" indicator-dots="true">
      <swiper-item>
        <image class="image" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%BC%95%E5%AF%BC%E9%A1%B5/%E5%BC%95%E5%AF%BC%E9%A1%B51.png" mode="aspectFill"></image>
      </swiper-item>
      <swiper-item class="second-item">
        <image class="image" src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E5%BC%95%E5%AF%BC%E9%A1%B5/%E5%BC%95%E5%AF%BC%E9%A1%B52.png" mode="aspectFill"></image>
        <!-- 立刻体验按钮 -->
        <view class="experience-button" @click="goToHome">立刻体验</view>
      </swiper-item>

    </swiper>
  </view>
</template>

<script>
export default {
  methods: {
    skipGuide() {
      // 跳转到首页
      uni.reLaunch({
        url: '/pages/home/home' // 替换为你的首页路径
      });
    },
    goToHome() {
      // 点击“立刻体验”按钮后跳转到首页
      uni.reLaunch({
        url: '/pages/home/home' // 替换为你的首页路径
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  position: relative;
  /* 设置为相对定位，用于绝对定位子元素 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;

}

/* 跳过按钮样式 */
.skip-button {
  position: absolute;
  top: 60rpx;
  /* 距离顶部的距离 */
  right: 60rpx;
  /* 距离右侧的距离 */
  padding: 10rpx 20rpx;
  font-size: 28rpx;
  color: #7ac098;
  background-color: rgba(198, 231, 212, 1.0);
  /* 半透明背景 */
  border-radius: 30rpx;
  z-index: 999;
  /* 确保按钮在最上层 */
}

/* 轮播图样式 */
.swiper {
  width: 100%;
  height: 80%;
}

.image {
  width: 100%;
  height: 100%;
}

/* 第二个轮播项的样式 */
.second-item {
  position: relative;
  /* 设置为相对定位，用于绝对定位子元素 */
}

/* 立刻体验按钮样式 */
.experience-button {
  position: absolute;
  bottom: 70rpx;
  /* 距离底部的距离 */
  left: 50%;
  /* 水平居中 */
  transform: translateX(-50%);
  padding: 20rpx 120rpx;
  font-size: 25rpx;
  color: #fafcfc;
  background-color: rgba(26, 150, 98, 1.0);
  /* 半透明背景 */
  border-radius: 30rpx;
  z-index: 999;
  /* 确保按钮在最上层 */
  margin-top: 50px;
}
</style>
